<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分类管理</title>
    <link rel="stylesheet" href="/plugins/iview/css/iview.css">
</head>
<body>

<div id="app">

    <create v-bind:show="showCreate" v-bind:dto="dataDto" @close="closeCreate" @save="create"></create>
    <div style="background: #f5f7f9; margin: 6px 20px;">
        <i-button type="primary"  @click="showCreate=true"> 添 加 </i-button>{{imgName}}{{visible}}
    </div>

    <!--<upload-image v-bind:upload-length="1"></upload-image>-->

    <div class="table-con">
        <i-table border :columns="columns" :data="tableData" :loading="loading" style="margin-left: 30px;margin-right: 30px;"></i-table>
    </div>
    <!--<div v-if="tableData.length<=0" style="text-align: center;font-size: 20px;margin: 30px; ">暂无数据</div>-->
    <!--<div class="paging">
        <Page :total="params.total" :page-size="params.size" @on-change="changePage" show-total></Page>
    </div>-->

    <Modal title="图片" v-model="visible">
        <img :src="imgName" v-if="visible" style="width: 90%">
    </Modal>

</div>

<script src="/plugins/vue/2.3.4/vue.min.js"></script>
<script src="/plugins/iview/js/iview.min.js"></script>
<script src="/plugins/vue/httpVueLoader.js"></script>
<script src="/plugins/vue/axios.min.js"></script>
<script src="/app/js/i-axios.js"></script>
<script src="/app/js/utils.js"></script>

<script type="text/javascript">

    var vm = new Vue({
        el: '#app',
        components: {
            'create': httpVueLoader('create.vue'),
            'upload-image': httpVueLoader('upload-image.vue')
        },
        data:{
            showCreate: false,
            num:1,
            visible:false,
            imgName:undefined,
            dataDto:{
                id:undefined,
                name:undefined,
                ico:undefined,
                description:undefined,
                sort:undefined,
                remark: undefined
            },
            columns: [
                {
                    type: 'index',
                    width:40,
                    align: 'center'
                },
                {
                    title: '名称',
                    key: 'name',
                    // width:150,
                    align: 'center'
                },
                {
                    title: '简介',
                    key: 'description',
                    // width:150,
                    align: 'center'
                },
                {
                    title: '图标',
                    key: 'ico',
                    align: 'center',
                    render: (h, params) => {
                        let _this =this;
                         return h('img', {
                            attrs:{
                                'src':params.row.ico,
                            },
                            style: {
                                width: '80px',
                                height:'60px'
                            },
                            on: {
                                click() {
                                    console.info("aaa")
                                    this.vm.visible = true;
                                    this.vm.imgName=params.row.ico;
                                    console.info("aaa",_this.imgName,this.vm)
                                }
                            }
                        }, '点击查看');
                    }
                },
                {
                    title: '顺序',
                    key: 'sort',
                    align: 'center'
                },
                {
                    title: '操作',
                    key: 'action',
                    align: 'center',
                    // width: 250,
                    render: (h, params) => {
                        let btns = [];
                        btns.push(
                            h('Button', {
                                props: {
                                    type: 'info',
                                    size: 'small'
                                },
                                style: {
                                    marginRight: '8px'
                                },
                                on: {
                                    click: () => {
                                        this.update(params.index)
                                    }
                                }
                            }, '修改')
                        )

                        btns.push(
                            h('Button', {
                                props: {
                                    type: 'info',
                                    size: 'small'
                                },
                                style: {
                                    marginRight: '8px'
                                },
                                on: {
                                    click: () => {
                                        this.del(params.index)
                                    }
                                }
                            }, '删除')
                        )

                        return h('div', btns);
                    }
                }
            ],
            tableData:[],
            params:{
                pid:undefined,
            },
            editIndex:undefined,
            loading:false
        },
        mounted() {
            this.load();
        },
        methods:{
            load() {
                let _this = this;
                _this.loading=true;
                iget('/admin/category',
                    _this.params,
                    successRes => {
                        _this.tableData=successRes
                        _this.loading=false;
                    },failureRes => {
                        console.info("加载数据异常",failureRes)
                    }
                )
            },
            closeCreate(show){
                this.showCreate=show;
            },
            create(){
                this.showCreate=false;
                this.tableData.push(JSON.parse(JSON.stringify(this.dataDto)));
                this.tableData = orderBy(this.tableData,['sort'],['asc'])
                this.dataDto = cleanParams(this.dataDto)
            }
        }
    });
</script>

</body>
</html>